<template>
  <div>
    <el-dialog v-if="enable" title="终端" :visible.sync="enable" :before-close="actionDialogClose" width="80%">
      <div id="terminal" @contextmenu.prevent="actionTerminalContextMenu"></div>
    </el-dialog>
  </div>
</template>
<script>
import Common from '../../utils/Common.js'
import { Terminal } from 'xterm'
require('xterm/css/xterm.css');
import { FitAddon } from "xterm-addon-fit";
export default {
    name : 'DialogTerminal',
    data() {
        return {
            enable : false,
            terminal : null,
            terminalFitAddon : null,
            shellStream : null,
            startPath : null,
        };
    },
    methods : {
        // 打开终端
        open( path ) {
            this.enable = true;
            this.startPath = path;

            let $this = this;
            this.$nextTick(() => {
                $this.setup();
            });
        },

        // 配置终端
        async setup() {
            let $this = this;
            this.terminal = new Terminal({
                cursorBlink: true,
                cursorStyle: "underline",
                scrollback: 100,
            });
            const fitAddon = new FitAddon();
            this.terminal.loadAddon(fitAddon);
            this.terminalFitAddon = fitAddon;
            
            this.terminal.open(document.getElementById('terminal'));
            fitAddon.fit();
            this.terminal.onData(data =>  {
                $this.shellStream.write(data);
            });

            let server = this.$store.getters.serverCurrent;
            this.shellStream = await server.getShell();
            this.shellStream.on("data", (data) => {
                $this.terminal.write(data.toString());
            });
            await Common.msleep(100);
            this.shellStream.write(`cd ${this.startPath} && clear\n`);

            this.terminal.focus();
        },

        // 弹框关闭
        actionDialogClose(done) {
            this.$contextmenu.destroy();
            this.shellStream.close();
            this.terminal.dispose();
            done();
        },

        // 终端右键处理
        async actionTerminalContextMenu( event ) {
            let $this = this;
            let clipboardText = await navigator.clipboard.readText();
            this.$contextmenu({ 
               items: [{
                    label: "复制",
                    onClick: () => { $this.actionTerminalCopy();},
                    disabled : !$this.terminal.hasSelection(),
                } , { 
                    label: "粘贴", 
                    onClick: () => { $this.actionTerminalPaste();},
                    disabled: 0 == clipboardText.length,
                }],
                event,
                customClass: "custom-class",
                zIndex: 10000,
                minWidth: 230
            });
        },

        // 复制终端选中的内容
        actionTerminalCopy() {
            let content = this.terminal.getSelection();
            navigator.clipboard.writeText(content);
            this.terminal.clearSelection();
        },

        // 粘贴内容到终端
        async actionTerminalPaste() {
            let clipboardText = await navigator.clipboard.readText();
            this.shellStream.write(clipboardText);
            this.terminal.focus();
        },
    },
}
</script>